<template>
  <div id="operationLogManage">
    <!-- 搜索框-->
    <operation-log-search
      :show-search="showSearch"
      @handle-query="handleQuery($event)"
      @handle-reset="handleQuery({}, true)"
    />
    <!-- 列表 -->
    <el-card shadow="never">
      <!-- 表格工具栏 -->
      <div class="toolbar">
        <!-- 左侧工具栏 -->
        <div>
          <el-button
            :disabled="removeIdList.length === 0"
            :icon="Delete"
            type="danger"
            @click="handleBatchDel"
          >
            批量删除
          </el-button>
          <el-button :icon="Download" @click="handleExport"> 导出</el-button>
        </div>
        <!-- 右侧工具栏 -->
        <div>
          <el-button
            :icon="Refresh"
            circle
            title="刷新"
            @click="handleQuery({}, true)"
          />
          <el-popover placement="bottom" trigger="click">
            <template #reference>
              <el-button :icon="Operation" circle title="筛选列" />
            </template>
            <el-scrollbar max-height="350px">
              <template v-for="col in cols" :key="col.props">
                <el-checkbox v-model="col.show" :label="col.label" />
              </template>
            </el-scrollbar>
          </el-popover>
          <el-button
            :icon="Search"
            circle
            title="搜索"
            @click="handleSearchShow"
          />
        </div>
      </div>
      <!-- 列表 -->
      <el-table
        :data="tableData"
        border
        highlight-current-row
        row-key="id"
        @selection-change="handleSelectionChange"
      >
        <el-table-column align="center" type="selection" width="50" />
        <el-table-column
          v-if="handleColShow('id')"
          align="center"
          label="数据Id"
          prop="id"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          v-if="handleColShow('title')"
          align="center"
          label="模块标题"
          prop="title"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          v-if="handleColShow('operationType')"
          align="center"
          label="操作类型"
          prop="operationType"
          show-overflow-tooltip
          width="150"
        />
        <el-table-column
          v-if="handleColShow('requestMethod')"
          align="center"
          label="请求方法"
          prop="requestMethod"
          show-overflow-tooltip
          width="200"
        >
          <template #default="scope">
            <el-tag :type="getOperationType(scope.row.requestMethod)"
              >{{ scope.row.requestMethod }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('requestParam')"
          align="center"
          label="请求参数"
          prop="requestParam"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow('requestUrl')"
          align="center"
          label="请求地址"
          prop="requestUrl"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow('personId')"
          align="center"
          label="操作人Id"
          min-width="200"
          prop="personId"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('operationPerson')"
          align="center"
          label="操作人"
          min-width="200"
          prop="operationPerson"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('personType')"
          align="center"
          label="操作人类型"
          min-width="200"
          prop="personType'"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('operationIp')"
          align="center"
          label="操作IP"
          prop="operationIp"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column
          v-if="handleColShow('ipRegion')"
          align="center"
          label="物理地址"
          min-width="200"
          prop="ipRegion"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('os')"
          align="center"
          label="操作系统"
          min-width="200"
          prop="os"
          show-overflow-tooltip
        />
        <el-table-column
          v-if="handleColShow('browser')"
          align="center"
          label="浏览器"
          prop="browser"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          v-if="handleColShow('status')"
          align="center"
          label="操作状态"
          prop="status"
          show-overflow-tooltip
          width="100"
        >
          <template #default="scope">
            <el-tag :type="scope.row.status ? 'success' : 'danger'">
              {{ scope.row.status ? "操作成功" : "操作失败" }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          v-if="handleColShow('errorMsg')"
          align="center"
          label="错误信息"
          prop="errorMsg"
          show-overflow-tooltip
          width="100"
        />
        <el-table-column
          v-if="handleColShow('createTime')"
          align="center"
          label="创建时间"
          prop="createTime"
          show-overflow-tooltip
          width="200"
        />
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button
              :icon="Delete"
              size="small"
              type="danger"
              @click="handleDel(scope.row.id)"
            >
              删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 分页 -->
      <el-scrollbar>
        <div class="pagination">
          <el-pagination
            :page-size="queryData.pageSize"
            :page-sizes="[10, 20, 30, 50]"
            :total="parseInt(total)"
            background
            layout="prev,pager,next,jumper,total,sizes"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </div>
      </el-scrollbar>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import {
  Delete,
  Download,
  Operation,
  Refresh,
  Search,
} from "@element-plus/icons-vue";
import OperationLogSearch from "@/views/back/system/operationLog/components/OperationLogSearch.vue";
import { ref } from "vue";
import {
  OperationLogControllerService,
  OperationLogQueryParams,
  OperationLogVO,
} from "@/api";

import { ElMessage, ElMessageBox } from "element-plus";
import { handleExportResponse } from "@/util/FileUtil";

/**
 * 查询搜索开始
 */
const queryInit = {
  pageNum: 1,
  pageSize: 10,
  beginTime: "",
  endTime: "",
  keyword: "",
};
//查询数据对象
const queryData = ref({ ...queryInit });

//查询事件
function handleQuery(query: OperationLogQueryParams, reset?: boolean) {
  //处理时间函数
  if (query?.createTime) {
    queryData.value.beginTime = query.createTime[0];
    queryData.value.endTime = query.createTime[1];
  }
  if (query?.keyword) {
    queryData.value.keyword = query.keyword;
  }
  //重置页码
  if (reset) {
    queryData.value = { ...queryInit };
  }
  let data = queryData.value;
  OperationLogControllerService.queryOperationLogPageUsingGet(
    data.pageNum,
    data.pageSize,
    data.beginTime,
    data.endTime,
    data.keyword
  ).then((res) => {
    const { data } = res;
    total.value = data?.total || 0;
    tableData.value = data?.rows || [];
  });
}

function getOperationType(type: string) {
  switch (type) {
    case "POST":
      return "success";
    case "PUT":
      return "warning";
    case "DELETE":
      return "danger";
    case "GET":
      return "primary";
    default:
      return "info";
  }
}

// 页面创建时调用
handleQuery({});
//查询的数据
const total = ref<number>(0); //总条数
const tableData = ref<OperationLogVO[]>([]); // 数据集合

//页面显示条数变化
function handleSizeChange(value: number) {
  queryData.value.pageSize = value;
  handleQuery({});
}

//页码变化
function handleCurrentChange(value: number) {
  queryData.value.pageNum = value;
  handleQuery({});
}

/**
 * 查询数据结束
 */

/**
 * 工具栏开始
 *
 */
// 2、批量删除开始
const selectionList = ref<Array<OperationLogVO>>(); //选中的数据集合
const removeIdList = ref<number[]>([]); //选中的数据Id集合
function handleSelectionChange(value: OperationLogVO[]) {
  selectionList.value = value;
  //获取选中的数据id
  removeIdList.value = value.map((item) => item.id!);
}

//批量删除事件
function handleBatchDel() {
  ElMessageBox.confirm(
    "确定要删除选中的" + removeIdList.value?.length + "条数据吗？",
    "警告",
    {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }
  )
    .then(() => {
      OperationLogControllerService.delOperationLogUsingDelete(
        removeIdList.value
      ).then((res) => {
        ElMessage.success(res.data);
        handleQuery({}, true);
      });
    })
    .catch(() => {
      ElMessage.info("取消删除！");
    });
}

// 2、批量删除结束

// 4、导出开始
function handleExport() {
  let data = queryData.value;
  OperationLogControllerService.exportOperationLogUsingGet(
    data.pageNum,
    data.pageSize,
    data.beginTime,
    data.endTime,
    data.keyword
  ).then((res) => {
    handleExportResponse(res);
  });
}

// 4、导出结束
// 6、筛选列开始
//列数据
const cols = ref([
  {
    label: "数据Id",
    props: "id",
    show: false,
  },
  {
    label: "功能标题",
    props: "title",
    show: true,
  },
  {
    label: "操作类型",
    props: "operationType",
    show: true,
  },
  {
    label: "请求方法",
    props: "requestMethod",
    show: true,
  },
  {
    label: "请求参数",
    props: "requestParam",
    show: true,
  },
  {
    label: "请求Url",
    props: "requestUrl",
    show: true,
  },
  {
    label: "操作人Id",
    props: "personId",
    show: false,
  },
  {
    label: "操作人",
    props: "operationPerson",
    show: false,
  },
  {
    label: "操作人类型",
    props: "personType",
    show: false,
  },
  {
    label: "操作IP",
    props: "operationIp",
    show: true,
  },
  {
    label: "物理地址",
    props: "ipRegion",
    show: false,
  },
  {
    label: "操作系统",
    props: "os",
    show: true,
  },
  {
    label: "浏览器",
    props: "browser",
    show: false,
  },
  {
    label: "操作状态",
    props: "status",
    show: true,
  },
  {
    label: "错误信息",
    props: "errorMsg",
    show: false,
  },
  {
    label: "创建时间",
    props: "createTime",
    show: true,
  },
]);

//列展示处理
function handleColShow(prop: string) {
  return cols.value.filter((col) => col.props === prop)[0].show;
}

// 6、筛选列结束
// 7、搜索展示开始
//搜索展示处理
const showSearch = ref(true);

function handleSearchShow() {
  showSearch.value = !showSearch.value;
}

// 7、搜索展示结束
/**
 * 工具栏结束
 * 表格操作开始
 */
// 4、删除一条操作日志数据

const handleDel = (id: number) => {
  if (!id) {
    ElMessage.warning("请选择数据后再删除！");
    return;
  }
  //删除数据
  OperationLogControllerService.delOperationLogUsingDelete([id]).then((res) => {
    ElMessage.success(res.data);
    handleQuery({}, true);
  });
};
</script>

<style lang="scss" scoped>
#operationLogManage {
  .toolbar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    margin-bottom: 10px;
  }

  .pagination {
    margin-top: 12px;
  }
}
</style>
